<template>
    <el-container>
        <el-header>
            <div class="r-content">
                <el-dropdown trigger="click" size="mini">
                <span>
                    <img class="user" :src="userImg">
                </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-main>
            <div class="login-form">
                <el-card class="login-container">
                    <div slot="header" class="login-header">
                        <span>Java在线编程系统</span>
                    </div>
                    <el-form v-bind:model="loginForm" v-bind:rules="rules" ref="loginFormRef" label-width="80px" class="login_form">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" show-password></el-input>
                        </el-form-item>
                        <el-form-item class="form_btn">
                            <el-button type="primary" @click="submitForm('loginFormRef')">提交</el-button>
                            <el-button type="info" @click="resetForm('loginFormRef')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    //axios
    import axios from 'axios'

    export default {
        name: "login",
        data() {
            return {
                //登录表单数据绑定对象
                loginForm: {
                    username: '',
                    password: ''
                },
                //表单验证规则对象
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        //{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        //{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ]
                },
                //游客头像
                userImg: require("../../assets/image/user-default.jpg")
            }
        },
        methods: {
            //提交表单
            submitForm(formName) {
                //表单校验，成功则调用登录接口
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        let params = {
                            username: this.loginForm.username,
                            pwd: this.loginForm.password
                            //md5加密
                            //password: this.$md5(this.loginForm.password),
                        }
                        var that = this;

                        //发送请求
                        /*
                            接口: 学生编译
                            请求地址: http://localhost:8881/producer/login
                            请求方法: post
                            请求参数: password（用户名，字符串），pwd（密码，字符串）
                            响应内容: 编译结果
                        */
                        axios({
                            method: 'post',
                            url: 'http://localhost:8881/producer/login',
                            data: params
                        }).then(function (response) {
                            var res = response.data;
                            if(res.code == 200){
                                that.$message.success('登录成功！');
                                //将登录用户存储到localStorage
                                localStorage.setItem("username", that.loginForm.username)
                                //跳转页面
                                that.$router.push('/home')
                            }else{
                                that.$message.error('用户名或密码不正确！');
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        return false
                    }
                });
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields()
            }
        }
    }
</script>

<style lang="less" scoped>
    .login-container {
        width: 35%;
        height: 45%;
        border-radius: 3px;
        background-color: white;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .login-header {
        text-align: center;
    }

    .form_btn {
        display: flex;
        justify-content: space-between;
    }

    header{
        display: flex;
        height: 100%;
        /*左右靠边*/
        justify-content: space-between;
        /*上下居中*/
        align-items: center;
    }

    .l-content{
        display: flex;
        align-items: center;
    .el-button{
        margin-right: 20px;
    }
    }

    .r-content{
    .user{
        width: 40px;
        height: 40px;
        /*圆弧*/
        border-radius: 50%;
    }
    }
</style>